<template>
    <div class="list-item">
        <div class="inner" v-for="i in list" :key="i.id">
            <div class="title">
                {{i.title}}
               <span> {{i.titleright}}>></span>
            </div>
            <user-info :list="i.child" :type="i.type" v-if="i.type!==3"></user-info>
            <list-info v-if="i.type===3"></list-info>
        </div>
    </div>
</template>

<script>
    import UserInfo from '@/components/Commodity/CommodityDe/UserInfo'
    import ListInfo from '@/components/Commodity/CommodityDe/ListInfo'
    export default {
        name: "ListItem",
        props:['list'],
        components:{
            UserInfo,
            ListInfo
        }

    }
</script>

<style scoped lang="less">
    @import "../../../style/style.less";
    .list-item{
        .inner{
            background-color: #fff;
            border: 1px solid @border-color;
            padding: 0 10px 10px;
            margin-bottom: 10px;
        }

        .title {
            height: 55px;
            line-height: 55px;
            font-size: 14px;
            position: relative;
            padding-left: 10px;
            color: #333333;
            &:before {
                content: '';
                width: 3px;
                height: 22px;
                background-color: @theme-color-dark;
                position: absolute;
                top: 17px;
                left: 0;
            }
            .expert {
                position: absolute;
                right: 0;
                top: 16px;
            }
            >span{
                float: right;
                font-size: 14px;
                color: @theme-color-dark;
            }
        }
    }

</style>